<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>库存管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="/css/style.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-8">
        <h1 class="text-3xl font-bold text-center text-gray-800 mb-8">库存管理系统</h1>
        
        <!-- 创建库存表单 -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-8">
            <h2 class="text-xl font-semibold mb-4">创建新库存</h2>
            <form id="createInventoryForm" class="space-y-4">
                <div>
                    <label for="productName" class="block text-sm font-medium text-gray-700">产品名称</label>
                    <input type="text" id="productName" name="productName" required
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                </div>
                <div>
                    <label for="initialQuantity" class="block text-sm font-medium text-gray-700">初始数量</label>
                    <input type="number" id="initialQuantity" name="initialQuantity" min="0" required
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                </div>
                <button type="submit"
                        class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    创建库存
                </button>
            </form>
        </div>
        
        <!-- 库存列表 -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-xl font-semibold mb-4">库存列表</h2>
            <div id="inventoryList" class="space-y-4">
                <#if inventories?has_content>
                    <#list inventories as inventory>
                        <div class="border border-gray-200 rounded-lg p-4">
                            <div class="flex justify-between items-center">
                                <div>
                                    <h3 class="text-lg font-medium text-gray-900">${inventory.productName!}</h3>
                                    <p class="text-gray-500">库存ID: ${inventory.inventoryId!}</p>
                                </div>
                                <div class="text-right">
                                    <p class="text-2xl font-bold text-indigo-600">${inventory.quantity!}</p>
                                    <p class="text-gray-500">当前库存</p>
                                </div>
                            </div>
                            
                            <!-- 操作按钮 -->
                            <div class="mt-4 flex space-x-2">
                                <button onclick="openStockInModal('${inventory.inventoryId!}')"
                                        class="inline-flex items-center px-3 py-1 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700">
                                    入库
                                </button>
                                <button onclick="openStockOutModal('${inventory.inventoryId!}')"
                                        class="inline-flex items-center px-3 py-1 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700">
                                    出库
                                </button>
                                <button onclick="viewDetails('${inventory.inventoryId!}')"
                                        class="inline-flex items-center px-3 py-1 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                                    详情
                                </button>
                            </div>
                        </div>
                    </#list>
                <#else>
                    <p class="text-gray-500 text-center py-4">暂无库存记录</p>
                </#if>
            </div>
        </div>
    </div>
    
    <!-- 入库模态框 -->
    <div id="stockInModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden items-center justify-center">
        <div class="bg-white rounded-lg shadow-xl p-6 w-96">
            <h3 class="text-lg font-medium text-gray-900 mb-4">入库操作</h3>
            <form id="stockInForm">
                <input type="hidden" id="stockInInventoryId" name="inventoryId">
                <div class="mb-4">
                    <label for="stockInQuantity" class="block text-sm font-medium text-gray-700">入库数量</label>
                    <input type="number" id="stockInQuantity" name="quantity" min="1" required
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                </div>
                <div class="mb-4">
                    <label for="stockInReason" class="block text-sm font-medium text-gray-700">入库原因</label>
                    <input type="text" id="stockInReason" name="reason" required
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                </div>
                <div class="flex justify-end space-x-2">
                    <button type="button" onclick="closeStockInModal()"
                            class="inline-flex items-center px-3 py-1 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        取消
                    </button>
                    <button type="submit"
                            class="inline-flex items-center px-3 py-1 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700">
                        确认入库
                    </button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- 出库模态框 -->
    <div id="stockOutModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden items-center justify-center">
        <div class="bg-white rounded-lg shadow-xl p-6 w-96">
            <h3 class="text-lg font-medium text-gray-900 mb-4">出库操作</h3>
            <form id="stockOutForm">
                <input type="hidden" id="stockOutInventoryId" name="inventoryId">
                <div class="mb-4">
                    <label for="stockOutQuantity" class="block text-sm font-medium text-gray-700">出库数量</label>
                    <input type="number" id="stockOutQuantity" name="quantity" min="1" required
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                </div>
                <div class="mb-4">
                    <label for="stockOutReason" class="block text-sm font-medium text-gray-700">出库原因</label>
                    <input type="text" id="stockOutReason" name="reason" required
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                </div>
                <div class="flex justify-end space-x-2">
                    <button type="button" onclick="closeStockOutModal()"
                            class="inline-flex items-center px-3 py-1 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        取消
                    </button>
                    <button type="submit"
                            class="inline-flex items-center px-3 py-1 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700">
                        确认出库
                    </button>
                </div>
            </form>
        </div>
    </div>
    
    <script>
        // 创建库存
        document.getElementById('createInventoryForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const data = {
                productName: formData.get('productName'),
                initialQuantity: parseInt(formData.get('initialQuantity'))
            };
            
            fetch('/inventory/create', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
            .then(response => response.text())
            .then(result => {
                alert('库存创建成功');
                location.reload();
            })
            .catch(error => {
                console.error('Error:', error);
                alert('创建失败');
            });
        });
        
        // 入库操作
        document.getElementById('stockInForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const inventoryId = document.getElementById('stockInInventoryId').value;
            const formData = new FormData(this);
            const data = {
                quantity: parseInt(formData.get('quantity')),
                reason: formData.get('reason')
            };

            fetch("/inventory/" + inventoryId + "/stock-in", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
            .then(response => response.text())
            .then(result => {
                alert('入库操作成功');
                closeStockInModal();
                location.reload();
            })
            .catch(error => {
                console.error('Error:', error);
                alert('入库操作失败');
            });
        });
        
        // 出库操作
        document.getElementById('stockOutForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const inventoryId = document.getElementById('stockOutInventoryId').value;
            const formData = new FormData(this);
            const data = {
                quantity: parseInt(formData.get('quantity')),
                reason: formData.get('reason')
            };
            
            fetch("/inventory/"+inventoryId+"/stock-out", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
            .then(response => response.text())
            .then(result => {
                alert('出库操作成功');
                closeStockOutModal();
                location.reload();
            })
            .catch(error => {
                console.error('Error:', error);
                alert('出库操作失败');
            });
        });
        
        // 打开入库模态框
        function openStockInModal(inventoryId) {
            document.getElementById('stockInInventoryId').value = inventoryId;
            document.getElementById('stockInModal').classList.remove('hidden');
            document.getElementById('stockInModal').classList.add('flex');
        }
        
        // 关闭入库模态框
        function closeStockInModal() {
            document.getElementById('stockInModal').classList.add('hidden');
            document.getElementById('stockInModal').classList.remove('flex');
            document.getElementById('stockInForm').reset();
        }
        
        // 打开出库模态框
        function openStockOutModal(inventoryId) {
            document.getElementById('stockOutInventoryId').value = inventoryId;
            document.getElementById('stockOutModal').classList.remove('hidden');
            document.getElementById('stockOutModal').classList.add('flex');
        }
        
        // 关闭出库模态框
        function closeStockOutModal() {
            document.getElementById('stockOutModal').classList.add('hidden');
            document.getElementById('stockOutModal').classList.remove('flex');
            document.getElementById('stockOutForm').reset();
        }
        
        // 查看详情
        function viewDetails(inventoryId) {
            window.location.href = `/details/`+inventoryId;
        }
    </script>
</body>
</html>